<template>
  <div class="engraving-headline">
    <div class="column large-12 small-12 rf-engraving-headline">
      <!-- 这里是图标 -->
      <span class="rf-engraving-iconcontainer">
        <svg
          t="1664174362904"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6758"
          width="23"
          height="23"
        >
          <path
            d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32zM320 624h384v32H320v-32z m0-128h384v32H320v-32z m0-128h384v32H320v-32z"
            p-id="6759"
            fill="#8a8a8a"
          ></path>
        </svg>
      </span>
      <h3>你的镌刻信息</h3>
      <span class="rf-engraving"> </span>
      <button class="as-buttonlink">
        <!-- 点击之后进行传值方便下面进行判定 -->
        <span class="Spancolor" @click="ShowContext2">编辑</span>
      </button>
    </div>
    <div class="small-12">
      <p class="niuma">{{showCoontent}}</p>
    </div>
  </div>
</template>

<script>
import bus from '../../../../../bus';
export default {
  created() {
    // 接收third传递过来的数据
    const that =this
    bus.$on('preserve',function(frist,sceond){
       that.showCoontent=sceond
    })
  },
  data() {
    return {
      showCoontent: "",
      scrollFix:'',
      Changefix:true,
    };
  },
  methods: {
    ShowContext2() {
      bus.$emit('get-function',this.HideContext,this.scrollFix,)
      bus.$emit('Changefix',this.Changefix,this.scrollFix)
      // 点击编辑之后再点击取消不会清空数据，传值给third
      bus.$emit('CangeChange',true)
      // 传递已经保存的数据给InputFrist
      bus.$emit('Hidepreserve',this.showCoontent)
    },
  },
};
</script>

<style lang="less" scoped>
.large-12 {
  width: 327px;
  height: 25px;
  display: flex;
  align-items: center;
  .rf-engraving-iconcontainer {
    height: 25px;
    width: 25px !important;
    margin-right: 8px;
  }
  h3 {
    font-size: 15px;
    color: #5b5b5c;
    line-height: 1.47059;
    font-weight: 400;
  }
  .rf-engraving::after {
    content: "|";
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    margin: 0;
    padding: 0 10px;
    color: black;
  }
  .as-buttonlink {
    height: 35px;
    width: 36px;
    border: none;
    color: #06c;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600px;
  }
  .as-buttonlink:hover {
    span {
      color: black;
    }
  }
}
.small-12{
  position: relative;
  width: 327px;
  height: 39px;
  p{
    position: absolute;
    margin-top: 14px;
    width: 290px;
    height: 25px;
    left: 30px;
  }
}
</style>